<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="./weui.min.css">
    <style>
        img{
            float: left;
            margin-right: 9px;
            margin-bottom:9px;
            width: 79px;
            height: 79px;
        }
    </style>
</head>
<body>
    <div class="weui-cells">
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <textarea class="weui-textarea" placeholder="请输入投诉内容" rows="3" maxlength="200"></textarea>
                <div class="weui-textarea-counter"><span class="number"></span>/200</div>
            </div> 
        </div>
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <div class="weui-uploader">
                    <div class="weui-uploader__hd">
                        <p class="weui-uploader__title">证据截图<span style="font-size: 13px;color: #888;">（点击上方投诉内容进去截图）</span></p>
                        <div class="weui-uploader__info"><span class="num"></span>/4</div>
                    </div>
                    <div class="weui-uploader__bd">
                        <div class="weui-uploader__input-box in">
                            <input id="uploaderInput" class="weui-uploader__input" type="file" accept="image/*" multiple/>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="weui-btn-area">
        <a class="weui-btn weui-btn_primary" href="javascript:;">提交</a>
    </div>
    <script src="./jquery.min.js"></script>
    <script>
        $('.number').text('0');
        $('.num').text('0');

        $('.weui-textarea').keyup(function() {
            var i = $(this).val().length;
            $('.number').text(i);
        })
            var imgDel;
        $('#uploaderInput').change(function() {
            // this;
            // setTimeout(function() {
            //     console.log(this.value);
            // }, 1);


            if(this.value == '') {
                return false;
            }
            var filePath = $(this)[0].files[0];
            var reader = new FileReader();
            reader.onloadend = function(e) {
                var img = new Image();
                img.src = e.target.result;
                $('.in').before(img);
                var n = $('img').size();
                if(n >= 4) {
                    $('.in').hide();
                }
                $('.num').text(n);
                }
            reader.readAsDataURL(filePath);
        });

        // var n=$('img').size();
        // if(n >= 4) {
        //     $('.in').hide();
        // }
        // $('.num').text(n);

        // function getBase64Image(img) {
        //     var canvas = document.createElement("canvas");
        //     canvas.width = img.width;
        //     canvas.height = img.height;
        //     var ctx = canvas.getContext("2d");
        //     ctx.drawImage(img, 0, 0, img.width, img.height);
        //     var dataURL = canvas.toDataURL("image/png");
        //     return dataURL // return dataURL.replace("data:image/png;base64,", ""); 
        // }
    </script>
    
</body>
</html>
